<template>
  <div class="basic-info-container">
    <!-- 基本信息概览 -->
    <div class="info-overview">
      <div class="info-header">
        <h3>基础信息</h3>
      </div>
      <div class="info-content" v-loading="loading">
        <div class="user-avatar-info">
          <div class="avatar-placeholder">
            <img v-if="userInfo.avatar_full" :src="userInfo.avatar_full" alt="头像" />
            <div v-else class="avatar-placeholder-circle"></div>
          </div>
          <div class="user-details">
            <div class="user-name-phone">
              <span class="user-name">{{ userInfo.nickname || '暂无' }}</span>
              <span class="user-phone">{{ userInfo.phone || '暂无' }}</span>
              <el-tag v-if="userInfo.car_owner_type === 1" type="success" effect="dark" size="mini">
                非营运车
              </el-tag>
              <el-tag v-if="userInfo.car_owner_type === 2" type="warning" effect="dark" size="mini">
                营运车
              </el-tag>
            </div>
            <!-- <div class="user-location">
              注册地: 四川省成都市成华区
            </div> -->
            <div class="user-stats">
              <div class="stat-item">
                <span class="stat-label">当前诚信值:</span>
                <span class="stat-value">{{ userInfo.honesty || 0 }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">到账推广费:</span>
                <span class="stat-value">¥{{ userInfo.promotion_fee || '0.00' }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">信息费抵扣额:</span>
                <span class="stat-value">¥{{ userInfo.total_deduction_fee || '0.00' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="info-section-warps">
      <!-- 实名认证信息 -->
      <div class="info-section">
        <div class="section-header">
          <h4>实名认证</h4>
        </div>
        <div class="section-content">
          <div class="info-item">
            <div style="margin-right: 20px">
              <div class="id-about">
                <el-image v-if="userInfo.carOwnerAuth && userInfo.carOwnerAuth.id_card_front"
                  :src="userInfo.carOwnerAuth.id_card_front_full" alt="身份证人像"
                  :preview-src-list="[userInfo.carOwnerAuth.id_card_front_full]" fit="cover"
                  style="width: 100%; height: 100%;" />
                <img v-else src="../../../assets/id/id-z.png" />
                <span>身份证人像</span>
              </div>
              <div class="id-about">
                <el-image v-if="userInfo.carOwnerAuth && userInfo.carOwnerAuth.id_card_back"
                  :src="userInfo.carOwnerAuth.id_card_back_full" alt="身份证国徽"
                  :preview-src-list="[userInfo.carOwnerAuth.id_card_back_full]" fit="cover"
                  style="width: 100%; height: 100%;" />
                <img v-else src="../../../assets/id/id-f.png" />
                <span>身份证国徽</span>
              </div>
            </div>
            <div class="item-content">
              <p>姓名：{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.real_name) || '暂无' }}</p>
              <p>身份证号：{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.id_card_number) || '暂无' }}</p>
              <p>证件有效期：{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.id_card_validity) || '暂无' }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 驾驶证信息 -->
      <div class="info-section">
        <div class="section-header">
          <h4>驾驶证</h4>
        </div>
        <div class="section-content">
          <div class="info-item">
            <div style="margin-right: 20px">
              <div class="id-about">
                <el-image v-if="userInfo.carOwnerAuth && userInfo.carOwnerAuth.driver_license"
                  :src="userInfo.carOwnerAuth.driver_license_full" alt="驾驶证"
                  :preview-src-list="[userInfo.carOwnerAuth.driver_license_full]" fit="cover"
                  style="width: 100%; height: 100%;" />
                <img v-else src="../../../assets/id/id-z.png" />
                <span>驾驶证</span>
              </div>
            </div>

            <div class="item-content">
              <p>驾驶证号码：{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.driver_license_number) || '暂无' }}</p>
              <p>证件有效期：{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.driver_license_validity) || '暂无' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 行驶证信息 -->
    <div class="info-section-warps" v-if="userInfo.car_owner_cars && userInfo.car_owner_cars.length > 0">
      <div v-for="(car, index) in userInfo.car_owner_cars" :key="car.id" class="info-section">
        <div class="section-header">
          <h4>行驶证{{ index + 1 }}</h4>
        </div>
        <div class="section-content">
          <div class="info-item">
            <div style="margin-right: 20px">
              <div class="id-about">
                <el-image v-if="car.drivering_license" :src="car.drivering_license_full" alt="行驶证"
                  :preview-src-list="[car.drivering_license_full]" fit="cover" style="width: 100%; height: 100%;" />
                <img v-else src="../../../assets/id/id-z.png" />
                <span>行驶证</span>
              </div>
            </div>
            <div class="item-content">
              <p>车牌号：{{ car.car_number || '暂无' }}</p>
              <p>品牌型号：{{ car.brand_model || '暂无' }}</p>
              <p>车座数：{{ car.seats || 0 }}座</p>
              <p>证件有效期：{{ car.drivering_license_validity || '暂无' }}</p>
            </div>
          </div>
          <div class="info-item" v-if="car.operating_license">
            <div style="margin-right: 20px">
              <div class="id-about">
                <el-image v-if="car.operating_license" :src="car.operating_license_full" alt="营运证"
                  :preview-src-list="[car.operating_license_full]" fit="cover" style="width: 100%; height: 100%;" />
                <img v-else src="../../../assets/id/id-z.png" />
                <span>营运证</span>
              </div>
            </div>
            <div class="item-content">
              <p>营运证有效期：{{ car.operating_license_validity || '暂无' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 附加信息 -->
    <div class="aside-info-section">
      <div class="section-header">
        <h4>注册成功时间</h4>
      </div>
      <div class="section-content">
        <p>{{ userInfo.created_at || '暂无' }}</p>
      </div>
    </div>
    <div class="aside-info-section">
      <div class="section-header">
        <h4>车主认证成功时间</h4>
      </div>
      <div class="section-content">
        <p>{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.auth_at) || '暂无' }}</p>
      </div>
    </div>
    <div class="aside-info-section">
      <div class="section-header">
        <h4>车主认证最近更新时间</h4>
      </div>
      <div class="section-content">
        <p>{{ (userInfo.carOwnerAuth && userInfo.carOwnerAuth.updated_at) || '暂无' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "../api";

export default {
  data () {
    return {
      userId: null,
      userInfo: {},
      loading: false,
    };
  },
  created () {
    // 从路由参数获取用户ID
    this.userId = this.$route.query.id;
    console.log(this.userId)
    if (this.userId) {
      this.getUserInfo();
    }
  },
  methods: {
    getUserInfo () {
      this.loading = true;
      getUserInfo(this.userId)
        .then((res) => {
          if (res.err === 0) {
            // 合并用户基本信息和车主认证信息
            this.userInfo = {
              ...res.data.user,
              carOwnerAuth: res.data.carOwnerAuth,
              car_owner_cars: (res.data.carOwnerAuth && res.data.carOwnerAuth.car_owner_cars) || []
            };
          } else {
            this.$message.error(res.msg || '获取用户信息失败');
          }
        })
        .catch((error) => {
          console.error('获取用户信息失败:', error);
          this.$message.error('获取用户信息失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-info-container {
  padding: 10px;

  .info-overview {
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;

    .info-header {
      h3 {
        margin: 0 0 15px 0;
        font-size: 16px;
        color: #303133;
      }
    }

    .info-content {
      font-size: 14px;

      .user-avatar-info {
        display: flex;
        align-items: flex-start;

        .avatar-placeholder {
          margin-right: 20px;
          flex-shrink: 0;

          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
          }

          .avatar-placeholder-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f0f0f0;
            border: 2px solid #e0e0e0;
          }
        }

        .user-details {
          flex: 1;

          .user-name-phone {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .user-name {
              font-size: 16px;
              font-weight: 500;
              color: #303133;
              margin-right: 15px;
            }

            .user-phone {
              color: #606266;
              margin-right: 15px;
            }
          }

          .user-location {
            color: #909399;
            font-size: 13px;
            margin-bottom: 15px;
          }

          .user-stats {
            .stat-item {
              margin-bottom: 8px;
              display: flex;
              align-items: center;

              .stat-label {
                color: #909399;
                margin-right: 8px;
                font-size: 13px;
                min-width: 80px;
              }

              .stat-value {
                color: #303133;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }

  .info-section-warps {
    display: flex;
    justify-content: space-between;

    border-bottom: 1px solid #ebeef5;
    margin-bottom: 25px;

    .info-section {
      padding-bottom: 15px;

      .section-header {
        h4 {
          margin: 0 0 15px 0;
          font-size: 15px;
          color: #303133;
        }
      }

      .section-content {
        .id-about {
          width: 200px;
          height: 128px;
          position: relative;

          &:first-child {
            margin-bottom: 12px;
          }

          img {
            width: 100%;
            height: 100%;
          }

          span {
            border-width: 0px;
            position: absolute;
            right: 0;
            top: 0;
            width: 76px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            font-size: 12px;
            text-align: center;
            color: rgb(255, 255, 255);
            background-color: #909399;
          }
        }

        .info-item {
          display: flex;
          margin-bottom: 15px;

          .item-label {
            width: 80px;
            color: #909399;
            font-size: 14px;
          }

          .item-content {
            flex: 1;

            p {
              margin: 0 0 20px 0;
              color: #606266;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .aside-info-section {
    display: flex;
    align-items: center;

    .section-header {
      width: 180px;

      h4 {
        font-size: 15px;
        color: #303133;
      }
    }

    .section-content {
      flex: 1;

      p {
        color: #606266;
        font-size: 14px;
      }
    }
  }
}
</style>
